<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 95vw;
            padding: 10px;
            border: 1px solid #ccc;

        }

        #addbox {
            width: 500px;
            height: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;}
    </style>
</head>

<body>
    <select id="grade">
    </select>
    <button id="find">查询</button>
    <button id="add">添加</button>
    <div id="result">

    </div>
    <div id="addbox">
        <p>年级
            <select id="gradeId">
            </select>
        <p>课程：
            <input type="text" id="subjectName">
        </p>
        <p>课时：
            <input type="text" id="calsshour">
        </p>
        <p>
            <button id="btn_add">添加</button>
        </p>
        </p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        function loadGrade() {
            $.get(`http://www.bingjs.com:81/Grade/GetAll`, function (res) {
                let grade = {
                    GradeId: 0,
                    GradeName: '请选择年级'
                }
                res.unshift(grade)
                res.forEach(g => {
                    let option = $(`<option>`)
                    option.val(g.GradeId)
                    option.html(g.GradeName)
                    $(`#grade`).append(option)
                });
                res.forEach(g => {
                    let option = $(`<option>`)
                    option.val(g.GradeId)
                    option.html(g.GradeName)
                    $(`#gradeId`).append(option)
                });
            })
        }
        loadGrade()

        $(`#find`).click(function () {
            $.get(`http://www.bingjs.com:81/Subject/GetSubjectsByGrade`,
                { gradeId: $(`#grade`).val() }, function (res) {
                    $(`#result`).html(JSON.stringify(res))
                })
        })
        $(`#add`).click(function(){
            $(`#addbox`).toggle()
        })
        $(`#btn_add`).click(function(){
            $.post(`http://www.bingjs.com:81/Subject/Add`,{
                subjectName:$(`#subjectName`).val(),
                calsshour:$(`#calssHour`).val(),
                gradeId:$(`#gradeId`).val()
            },function(res){
                console.log(res);
            })
        })
    </script>
</body>

</html>